import axios from 'axios';

const form = document.querySelector('.form-data');
const region = document.querySelector('.region-name');
const apiKey = document.querySelector('.api-key');
const keyy = "2FLUSg74j4zKh5My5cQQQcKSlbQuAzKl";
const errors = document.querySelector('.errors');
const loading = document.querySelector('.loading');
const results = document.querySelector('.result-container');
const usage = document.querySelector('.carbon-usage');
const fossilfuel = document.querySelector('/fossil-fuel');
const myregion = document.querySelector('.my-region');
const clearBtn = document.querySelector('.clear-btn');

calculateColor = async (value) => {
    let co2Scale = [0, 150, 600, 750, 800];
    let colors = ['#2aa364', '#f5eb4d', '#9e4299', '#381d02', '#381d02'];

    let colsestNum = co2Scale.sort((a, b) => {
        return Math.abs(a - value) - Math.abs(b - value);
    })[0];

    let num = (element) => element > closestNum;
    let scaleIndex = co2Scale.findIndex(num);
    let closestColor = colors[scaleIndex];

    chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
};

const displayCarbonUsage = async (apiKey, region) => {
    try {
        await axios
            .get('https://api.co2signal.com/v1/latest', {
                params: {
                    countryCode: region,
                },
                headers: {
                    'auth-token': apiKey,
                },
            })
            .then((response) => {
                let CO2 = Math.floor(response.data.data.carbonIntensity);

                calculateColor(CO2);

                loading.style.display = 'none';
                form.style.display = 'none';
                myregion.textContent = region;
                usage.textContent = 
                    Math.round(response.data.data.carbonIntensity) + ' grams (grams CO2 emitted per kilowatt hour)';
                fossilfuel.textContent = 
                    response.data.data.fossilFuelPercentage.toFixed(2) + 
                    '% (percentage of fossil fuels used to generate electricity)';
                results.style.display = 'block';
            });
    } catch (error) {
        console.log(error);
        loading.style.display = 'none';
        results.style.display = 'none';
        errors.textContent = 'Sorry, we have no data for the region you have requested.';
    }
};

const setUpUser = async (apiKey, regionName) => {
    localStorage.setItem('apiKey', apiKey);
    localStorage.setItem('regionName', regionName);
    loading.style.display = 'block';
    errors.textContent = '';
    clearBtn.style.display = 'block';

    displayCarbonUsage(apiKey, regionName);
};

const handleSubmit = async (e) => {
    e.preventDefault();
    setUpuser(apiKey.value, region.value);
};

const init = async () => {
    const storedApiKey = localStorage.getItem('apiKey');
    const storedReion = localStorage.getItem('regionName');

    chrome.runtime.sendMessage({
        action: 'updateIcon',
        value: { 
            color: 'green',
        },
    });

    if (storedApiKey === null || storedReion === null) {
        form.style.display = 'block';
        results.style.display = 'none';
        loading.style.display = 'none';
        clearBtn.style.display = 'none';
        errors.textContent = '';
    } else {
        results.style.display = 'none';
        form.style.display = 'none';
        displayCarbonUsage(storedApiKey, storedReion);
        clearBtn.style.display = 'block';
    }
};

const reset = async (e) => {
    e.preventDefault();
    localStorage.removeItem('regionName');
    init();
};


form.addEventListener('submit', (e) => handleSubmit(e));
clearBtn.addEventListener('click', (e) => reset(e));

init();